<template>
  <div class="tableConfig">
    <a-tooltip placement="top" :mouseEnterDelay="0.5">
      <template slot="title">
        <span>自定义列表</span>
      </template>
      <c-button shape="circle" @click="openModal">
        <c-icon type="liebiao"
      /></c-button>
    </a-tooltip>
    <c-modal
      v-model="visible"
      title="自定义列表"
      :width="modalWidht"
      @ok="updateConfig"
      @cancel="cancel"
    >
      <p>请勾选要显示的列表内容 [ {{ min }}-{{ max }}个 ]</p>
      <a-checkbox-group
        v-model="checkboxs"
        @change="change"
        name="checkboxgroup"
        ref="checkboxgroup"
      >
        <a-checkbox
          v-for="item in options"
          :key="item.value"
          :value="item.value"
          :disabled="checkboxDisabled && checkboxs.indexOf(item.value) === -1"
        >
          {{ item.label }}
        </a-checkbox>
      </a-checkbox-group>
    </c-modal>
  </div>
</template>

<script>
import { max } from "lodash";

export default {
  props: {
    //   默认值
    defaultValue: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 存储的自定义配置名称
    configName: {
      type: String
    },
    // 列数
    column: {
      type: Number,
      default: 4
    },
    // 所有选项
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 最小选择个数
    min: {
      type: Number,
      default: 6
    },
    // 最大选择个数
    max: {
      type: Number,
      default: 15
    }
  },
  data() {
    return {
      visible: false,
      defaultCheckboxs: [], // 默认选中项
      checkboxs: [] // 已选项
    };
  },
  computed: {
    options() {
      let arr = JSON.parse(JSON.stringify(this.data));
      for (let i = 0; i < arr.length; i++) {
        let value = arr[i].dataIndex
          ? arr[i].dataIndex
          : arr[i].scopedSlots.customRender;
        arr[i].label = arr[i].title;
        arr[i].value = value;
      }
      return arr;
    },
    // 查询最长字段
    checkboxWidth() {
      let labels = this.options.map(i => i.label.length);
      let width = max(labels) * 14 + 40;
      return width;
    },
    // 弹窗宽度
    modalWidht() {
      let res = (24 + this.checkboxWidth) * this.column + 48;
      return res;
    },
    // 达到最小或最大数时禁用
    checkboxDisabled() {
      let res;
      if (
        this.checkboxs.length >= this.max ||
        this.checkboxs.length <= this.min
      ) {
        res = true;
      } else {
        res = false;
      }
      return res;
    }
  },
  methods: {
    // 更新自定义配置
    updateConfig() {
      this.defaultCheckboxs = this.checkboxs; // 更新默认选中项
      let name = this.configName ? this.configName : this.$route.name;
      let phone = this.$storage.get("loginPhone");
      this.$storage.set(`tableConfig-${name}-${phone}`, this.checkboxs);
      this.visible = false;
      this.$emit("change", this.checkboxs);
    },
    // 弹窗关闭，恢复默认选项
    cancel() {
      this.checkboxs = this.defaultCheckboxs;
    },
    change(checkedValues) {
      this.checkboxs = checkedValues;
    },
    openModal() {
      this.visible = true;
      // 设置每个checkbox宽度
      this.$nextTick(() => {
        let items = this.$refs.checkboxgroup.$children;
        items.forEach(i => {
          i.$el.style.width = this.checkboxWidth + "px";
        });
      });
    }
  },
  created() {
    this.defaultCheckboxs = this.defaultValue;
    this.checkboxs = this.defaultValue;
  }
};
</script>

<style lang="scss" scoped>
.tableConfig {
  .test {
    color: var(--color);
  }
  .ant-checkbox-wrapper {
    margin-left: 8px;
    margin-bottom: 8px;
  }
  ::v-deep .ant-checkbox-group-item {
    margin-bottom: 8px;
  }
}
</style>
